<template>
  <a-modal
    :centered="false"
    :visible="visible"
    :width="winWidth"
    @cancel="handleCancel"
    @ok="handleOk"
    style="top: 0;"
    title=""
  >
    <div>
      <a-menu
        mode="horizontal"
        v-model="current"
      >
        <a-sub-menu>
          <span class="submenu-title-wrapper" slot="title"><a-icon type="tool"/>能源监控</span>
          <a-menu-item-group title="能源监控" style="width: 350px;height: 400px;overflow: scroll">
            <a-menu-item key="setting:1" v-for="(item,index) in layoutData" class="a-menu-item">
              <img :src="item.imagesDir" width="56px" height="75px"/>
            </a-menu-item>

          </a-menu-item-group>
        </a-sub-menu>

        <a-sub-menu>
          <span class="submenu-title-wrapper" slot="title"><a-icon type="setting"/>智能工厂</span>
          <a-menu-item-group title="智能工厂" style="width: 350px;height: 400px;overflow: scroll">
            <a-menu-item key="setting:2" v-for="(item,index) in layoutData" class="a-menu-item">
              <img :src="item.imagesDir" width="56px" height="75px"/>
            </a-menu-item>

          </a-menu-item-group>
        </a-sub-menu>
        <a-sub-menu>
          <span class="submenu-title-wrapper" slot="title"><a-icon type="line-chart"/>SPC</span>
          <a-menu-item-group title="SPC" style="width: 350px;height: 400px;overflow: scroll">
            <a-menu-item key="setting:3" v-for="(item,index) in layoutData" class="a-menu-item">
              <img :src="item.imagesDir" width="56px" height="75px"/>
            </a-menu-item>

          </a-menu-item-group>
        </a-sub-menu>
        <a-sub-menu>
          <span class="submenu-title-wrapper" slot="title"><a-icon type="area-chart"/>图表</span>
          <a-menu-item-group title="图表" style="width: 350px;height: 400px;overflow: scroll">
            <a-menu-item key="setting:4" v-for="(item,index) in layoutData" class="a-menu-item">
              <img :src="item.imagesDir" width="56px" height="75px"/>
            </a-menu-item>

          </a-menu-item-group>
        </a-sub-menu>
      </a-menu>
    </div>

    <a-row>
      <a-col :span="20">
<!--        <a-card :bordered="false">-->

          <grid-layout
            :col-num="24"
            :is-draggable="dialogVisible"
            :is-mirrored="false"
            :is-resizable="dialogVisible"
            :layout="layoutData"
            :margin="[10, 10]"
            :row-height="rowHeight"
            :use-css-transforms="true"
            :vertical-compact="true"
          >

            <grid-item :h="item.h"
                       :i="item.i"
                       :key="item.i"
                       :w="item.w"
                       :x="item.x"
                       :y="item.y"
                       v-for="(item,index) in layoutData"
            >
<!--              <div  style="height: 40%;background-color: #00A0E9">-->
<!--                <p>EQPID: FLEX-GXALLRING-01</p>-->
<!--                <p>EQPID: FLEX-GXALLRING-01</p>-->
<!--                <p>EQPID: FLEX-GXALLRING-01</p>-->
<!--              </div>-->
              <div v-bind:style="{'background-image': 'url('+item.imagesDir+')'}" class="eqp-img"></div>
            </grid-item>
          </grid-layout>
<!--        </a-card>-->
      </a-col>
      <a-col :span="3">
<!--        <a-card :bordered="false"></a-card>-->
      </a-col>

    </a-row>
  </a-modal>
</template>
<script>

  import VueGridLayout from 'vue-grid-layout'

  const layoutData = {
    'mainData': [
      {
        'x': 0,
        'y': 0,
        'w': 2,
        'h': 1,
        'i': '0',
        imagesDir: require('@/assets/editor/1.png')
      }
      ,
      {
        'x': 0,
        'y': 1,
        'w': 2,
        'h': 1,
        'i': '1',
        imagesDir: require('@/assets/editor/5.png')
      },
      {
        'x': 0,
        'y': 2,
        'w': 2,
        'h': 1,
        'i': '2',
        imagesDir: require('@/assets/editor/6.png')
      },
      {
        'x': 0,
        'y': 3,
        'w': 2,
        'h': 1,
        'i': '3',
        imagesDir: require('@/assets/editor/7.png')
      },
      {
        'x': 1,
        'y': 0,
        'w': 2,
        'h': 1,
        'i': '4',
        imagesDir: require('@/assets/editor/8.png')
      },
      {
        'x': 1,
        'y': 1,
        'w': 2,
        'h': 1,
        'i': '5',
        imagesDir: require('@/assets/editor/9.png')
      },
      {
        'x': 1,
        'y': 2,
        'w': 2,
        'h': 1,
        'i': '6',
        imagesDir: require('@/assets/editor/10.png')
      },
      {
        'x': 1,
        'y': 3,
        'w': 2,
        'h': 1,
        'i': '7',
        imagesDir: require('@/assets/editor/11.png')
      },
      {
        'x': 2,
        'y': 0,
        'w': 2,
        'h': 1,
        'i': '8',
        imagesDir: require('@/assets/editor/12.png')
      },
      {
        'x': 2,
        'y': 1,
        'w': 2,
        'h': 1,
        'i': '9',
        imagesDir: require('@/assets/editor/13.png')
      },
      {
        'x': 2,
        'y': 2,
        'w': 2,
        'h': 1,
        'i': '10',
        imagesDir: require('@/assets/editor/14.png')
      },
      {
        'x': 2,
        'y': 3,
        'w': 2,
        'h': 1,
        'i': '11',
        imagesDir: require('@/assets/editor/15.png')
      },
      {
        'x': 3,
        'y': 0,
        'w': 2,
        'h': 1,
        'i': '12',
        imagesDir: require('@/assets/editor/16.png')
      },
      {
        'x': 3,
        'y': 1,
        'w': 2,
        'h': 1,
        'i': '13',
        imagesDir: require('@/assets/editor/17.png')
      },
      {
        'x': 3,
        'y': 2,
        'w': 2,
        'h': 1,
        'i': '14',
        imagesDir: require('@/assets/editor/18.png')
      },
      {
        'x': 3,
        'y': 3,
        'w': 2,
        'h': 1,
        'i': '15',
        imagesDir: require('@/assets/editor/19.png')
      },
      {
        'x': 4,
        'y': 0,
        'w': 2,
        'h': 1,
        'i': '16',
        imagesDir: require('@/assets/editor/20.png')
      },
      {
        'x': 4,
        'y': 1,
        'w': 2,
        'h': 1,
        'i': '17',
        imagesDir: require('@/assets/editor/4.png')
      },
      {
        'x': 4,
        'y': 2,
        'w': 2,
        'h': 1,
        'i': '18',
        imagesDir: require('@/assets/editor/4.png')
      },
      {
        'x': 4,
        'y': 3,
        'w': 2,
        'h': 1,
        'i': '19',
        imagesDir: require('@/assets/editor/4.png')
      }
    ]
  }

  const GridLayout = VueGridLayout.GridLayout
  const GridItem = VueGridLayout.GridItem
  export default {
    data() {
      return {
        // 布局数据
        layoutData: [],
        layoutConfig: {
          height: 100, // 默认高度
          dialogVisible: false // 是否可拖拽或改变大小
        },
        visible: false,
        rowHeight: 100,
        winWidth: 900,
        current: ['mail']
      }
    },
    components: {
      GridLayout,
      GridItem
    },
    methods: {
      init() {
        this.layoutData = layoutData.mainData
        this.winWidth = window.innerWidth*0.989375
        console.log(window.innerWidth)
      },
      edit(record) {
        this.visible = true
        // const { form: { setFieldsValue } } = this
        // this.$nextTick(() => {
        //   setFieldsValue(pick(record, []))
        // })
      },
      handleOk(e) {
        console.log(e)
        this.visible = false
      },
      handleCancel() {
        // clear form & currentStep
        this.visible = false
        this.currentStep = 0
      }
    },
    created() {
      this.init()
    }
  }
</script>


<style lang="less" scoped>
  .vue-grid-item {
    border: 1px solid #00a9ed;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    -webkit-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    background-position: center;
  }

  /*** EXAMPLE ***/
  #content {
    width: 100%;
  }

  .vue-grid-layout {
    background: #ffffff;
    border: 1px solid black;
  }

  .layoutJSON {
    background: #ddd;
    border: 1px solid black;
    margin-top: 10px;
    padding: 10px;
  }

  .eventsJSON {
    background: #ddd;
    border: 1px solid black;
    margin-top: 10px;
    padding: 10px;
    height: 100px;
    overflow-y: scroll;
  }

  .columns {
    -moz-columns: 120px;
    -webkit-columns: 120px;
    columns: 120px;
  }

  .vue-resizable-handle {
    z-index: 5000;
    position: absolute;
    width: 20px;
    height: 20px;
    bottom: 0;
    right: 0;
    background: url('');
    background-position: bottom right;
    padding: 0 3px 3px 0;
    background-repeat: no-repeat;
    background-origin: content-box;
    box-sizing: border-box;
    cursor: se-resize;
  }

  .vue-grid-item:not(.vue-grid-placeholder) {
    background: #ffffff;
    border: 1px solid black;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    -webkit-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    background-position: center;
  }

  .vue-grid-item.resizing {
    opacity: 0.9;
  }

  .vue-grid-item.static {
    background: #cce;
  }

  .vue-grid-item .text {
    font-size: 24px;
    text-align: center;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    height: 100%;
    width: 100%;
  }

  .vue-grid-item .no-drag {
    height: 100%;
    width: 100%;
  }

  .vue-grid-item .minMax {
    font-size: 12px;
  }

  .vue-grid-item .add {
    cursor: pointer;
  }

  .vue-draggable-handle {
    position: absolute;
    width: 20px;
    height: 20px;
    top: 0;
    left: 0;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/3500/svg' width='10' height='10'><circle cx='5' cy='5' r='5' fill='#999999'/></svg>") no-repeat;
    background-position: bottom right;
    padding: 0 8px 8px 0;
    background-repeat: no-repeat;
    background-origin: content-box;
    box-sizing: border-box;
    cursor: pointer;
  }
  @keyframes eqp-img {
    from {
      box-shadow: 0px 0px 4px #f00;
    }

    to {
      box-shadow: 0px 0px 16px #f00;
    }
  }
  .eqp-img{
    background-repeat: no-repeat;
    background-size: 100% 100%;
    -webkit-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    background-position: center;
    width: 100%;
    height: 100%;
    -webkit-animation: eqp-img 2s ease-in-out infinite alternate;
    animation: eqp-img 2s ease-in-out infinite alternate;
  }

  .a-menu-item{
    display:inline-block;margin: 0;
  }
</style>
